<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>趣看趣论</title>
	<link rel="stylesheet" type="text/css" href="../../build/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="../../build/css/main.css">
	<link rel="stylesheet" type="text/css" href="../../build/css/find.css">
	<script type="text/javascript" src="../../build/js/jquery.min.js"></script>
	<script src="../../build/public/vue.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../build/js/template.js"></script>
	<script type="text/javascript" src="../../build/js/config.js"></script>
	<script type="text/javascript" src="../../build/public/base.js"></script>
	<script type="text/javascript" src="../../build/public/vue-resource.js"></script>
	<script type="text/javascript" src="../../build/js/common.js"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</head>
<body>
	<div id="container" class="play" style="padding-bottom: 100px;">
		<div class="video">
			<video id="videoID" v-bind:src="playVideo.localVideoUrl2"/></video>
			<div class="controls">				
				<div class="statistics">
					<p class="praise">
						<span class="iconfont" v-if="!playVideo.isPraised" @click="praise">&#xe64e;</span>
						<span class="iconfont" v-if="playVideo.isPraised" style="color:#FF0000;" @click="praise">&#xe652;</span>
						<span>{{playVideo.praisedCount | statistics}}</span>
					</p>
					<p class="share">
						<span class="iconfont" style="color:#FFFFFF;" @click="share">&#xe64f;</span>
						<span>{{playVideo.sharedCount | statistics}}</span></p>
				</div>
				<img v-bind:src="playVideo.pictureUrl2" alt="资招APP" />
				<p class="time"><span class="current">00`00</span>/<span class="duration">00`00</span></p>
				<button type="button" class="iconfont btnPlay"><img src="../../build/images/play.png"/></button>
				<button type="button" class="iconfont btnUpper" v-if="playVideo.videoSeqState!='FIRST'" @click="previous">&#xe651;</button>
				<button type="button" class="iconfont btnDown" v-if="playVideo.videoSeqState!='LAST'" @click="following">&#xe650;</button>
				<div class="opacity"></div>
			</div>	
			
			
			
		</div>
		<div class="introduce">
			<p class="title">{{playVideo.title}}</p>
			<p class="summary">{{playVideo.summary}}</p>
		</div>
		<div style="width: 94%;height: 15px;margin: 8px 3% 15px 3%;border-bottom: 1px dashed #BBBBBB;"></div>
		<div class="recommend">
			<p class="title"><span>相关推荐</span></p>
			<div class="video-list">
				<div class="item" v-for="(item,index) in recommendList">
					<a v-bind:href="item.idStr2">
						<img v-bind:src="item.pictureUrl2" alt="资招APP" width="100%"/>
						<button type="button" class="btnPlay" @click="play"><img src="../../build/images/play.png"/></button>
						<div class="opacity"></div>
					</a>
					<div>
						<p class="name">{{item.title}}</p>
					</div>
				</div>
			</div>
		</div>
		<div class="share-jump-wrap">
			<div class="iconfont-wrap">
				<span class="iconfont">&#xe65b;</span>
			</div>
			<div class="iconfont-text">
				<span>发送给微信好友</span>
				<span>请从这里下手</span>
			</div>
		</div>
		<div class="share-jump-bg" @click="cancelShere"></div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#container",
			data:{
				recommendList:[],
				page:1,
				idStr:'',
				totalCount:0,
				pageSize:0,
				index:0,
				playVideo:{}
			},
			mounted:function(){
				this.$nextTick(function(){
					this.init();
					//分享
					post('/weiXinOAuth/advisor/no-login/auth-share',{authUrl:'http://zz.zdcf.cn/pages/find/play.html?idStr='+vm.idStr},function(res){
						if(res.code=="OK"){
							vm.timestamp=res.data.timestamp;
							vm.nonceStr=res.data.nonceStr;
							vm.signature=res.data.signature;
							wx.config({
							  debug: false,
							  appId: 'wxfc53d38dc557de17',
							  timestamp: vm.timestamp,
							  nonceStr: vm.nonceStr,
							  signature: vm.signature,
							  jsApiList: [
							    'checkJsApi',
							    'onMenuShareTimeline',
							    'onMenuShareAppMessage',
							    'openLocation',
							    'getLocation',
							  ]
							});
							wx.ready(function () {
								wx.onMenuShareAppMessage({
								    title: vm.playVideo.title, // 分享标题
								    desc: '资招 | 简单投资', // 分享描述
								    link: 'http://zz.zdcf.cn/pages/find/play.html?idStr='+vm.idStr, // 分享链接
								    imgUrl: 'http://zz.zdcf.cn/build/images/logo.png', // 分享图标
								    type: '', // 分享类型,music、video或link，不填默认为link
								    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								    success: function () { 
								    	get('/discovery/opinion/share',{opinionIdStr:vm.idStr},function(res){
								    		vm.playVideo.sharedCount=res.data.sharedCount;
								    	});
								    },
								    cancel: function () { 
								       
								    }
								}); 
								// 分享到朋友圈
								wx.onMenuShareTimeline({
									title: vm.playVideo.title,
									link: 'http://zz.zdcf.cn/pages/find/play.html?idStr='+vm.idStr, // 分享链接
									imgUrl: 'http://zz.zdcf.cn/build/images/logo.png', // 分享图标
									success: function () { 
								    	get('/discovery/opinion/share',{opinionIdStr:vm.idStr},function(res){
								    		vm.playVideo.sharedCount=res.data.sharedCount;
								    	});

									},
								});
							});	
						}
					});
				})
			},
			methods:{
				init:function(){
					//初始化
					this.getVideo()
					this.getRecommend()
				},
				getVideo:function(){
					var pathName = window.location.href
					vm.idStr = getParameter('idStr');
					console.log('vm.idStr = '+vm.idStr)
					
					get('/discovery/video/info',{opinionIdStr:vm.idStr},function(res){
						if(res.data.videoUrl){  //判断视频类型 本地 or  链接
							console.log('链接视频' )
						}else{
							console.log('本地视频')
							vm.playVideo = res.data
							vm.playVideo.localVideoUrl2 = domain + vm.playVideo.localVideoUrl
							vm.playVideo.pictureUrl2 = domain + vm.playVideo.pictureUrl
							
						}
					},function(res){
						console.log(res.error)
					})
				},
				getRecommend:function(){
					//获取相关推荐数据
					get('/discovery/video-related/list',{opinionIdStr:this.idStr,currentPage:this.page,deviceType:'WECHAT'},function(res){
						vm.recommendList = res.data.resultList
						vm.totalCount = res.data.totalCount
						vm.pageSize = res.data.pageSize
						for(var i=0;i<vm.recommendList.length;i++){
							vm.recommendList[i].idStr2 = 'play.html?idStr='+vm.recommendList[i].idStr
							vm.recommendList[i].pictureUrl2 = domain+vm.recommendList[i].pictureUrl
						}
						if(res.data.resultList.length == 7){
							vm.page++
						}else{
							vm.page = 1
						}
						window.localStorage.setItem('page',vm.page)
					},function(res){
						toast(res.data)
					})
					
				},
				play:function(event){
					//播放推荐的视频
					event.preventDefault()
					clicked = event.target.tagName
					if(clicked == 'IMG'){
						vm.idStr = $(event.target).parent().parent().attr('href').split('=')[1]
					}else if(clicked == 'BUTTON'){
						vm.idStr = $(event.target).parent().attr('href').split('=')[1]
					}
					get('/discovery/video/info',{opinionIdStr:vm.idStr},function(res){
						
						if(res.data.videoUrl){  //判断视频类型 本地 or  链接
							console.log('链接视频' )
							window.location.href = res.data.videoUrl	
						}else{
							console.log('本地视频')
							window.location.href = 'play.html?idStr='+vm.idStr
						}
					},function(res){
						console.log(res.error)
					})	
					
				},
				previous:function(event){
					//上一个视频
					event.stopPropagation()
					get('/discovery/previous-video',{opinionIdStr:this.idStr},function(res){
						if(res.data.videoUrl){
							window.location.href = res.data.videoUrl
						}else{							
							window.location.href = window.location.pathname+'?idStr='+res.data.idStr
							vm.getVideo()
						}
					},function(res){
						toast(res.error)
					})
				},
				following:function(event){
					event.stopPropagation()
					//下一个视频
					get('/discovery/following-video',{opinionIdStr:vm.idStr},function(res){
						if(res.data.videoUrl){
							window.location.href = res.data.videoUrl
						}else{						
							window.location.href = window.location.pathname+'?idStr='+res.data.idStr
							vm.getVideo()
						}						
					},function(res){
						toast(res.error)
					})
				},
				praise:function(event){
					if(window.localStorage.getItem('X-Auth-Token')){
						//点赞
						event.stopPropagation()
						post('/discovery/opinion/praise',{opinionIdStr:this.idStr,praise:!vm.playVideo.isPraised},function(res){
							if(res.data.isPraised){
								toast('点赞成功')
								vm.isPraised = true
							}else{
								toast('取消成功')
								vm.isPraised = false
							}
							vm.getVideo()
						},function(res){
							toast(res.error)
						})
					}else{
						window.location.href="../../pages/login/login.html";
					}
				},
				share:function(){
					//分享
					post('/weiXinOAuth/advisor/no-login/auth-share',{authUrl:'http://zz.zdcf.cn/pages/find/play.html?idStr='+vm.idStr},function(res){
						if(res.code=="OK"){
							vm.timestamp=res.data.timestamp;
							vm.nonceStr=res.data.nonceStr;
							vm.signature=res.data.signature;
							wx.config({
							  debug: false,
							  appId: 'wxfc53d38dc557de17',
							  timestamp: vm.timestamp,
							  nonceStr: vm.nonceStr,
							  signature: vm.signature,
							  jsApiList: [
							    'checkJsApi',
							    'onMenuShareTimeline',
							    'onMenuShareAppMessage',
							    'openLocation',
							    'getLocation',
							  ]
							});
							wx.ready(function () {
								wx.onMenuShareAppMessage({
								    title: vm.playVideo.title, // 分享标题
								    desc: '资招 | 简单投资', // 分享描述
								    link: 'http://zz.zdcf.cn/pages/find/play.html?idStr='+vm.idStr, // 分享链接
								    imgUrl: 'http://zz.zdcf.cn/build/images/logo.png', // 分享图标
								    type: '', // 分享类型,music、video或link，不填默认为link
								    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								    success: function () { 
								    	get('/discovery/opinion/share',{opinionIdStr:vm.idStr},function(res){
								    		vm.playVideo.sharedCount=res.data.sharedCount;
								    	});
								    },
								    cancel: function () { 
								       
								    }
								}); 
								// 分享到朋友圈
								wx.onMenuShareTimeline({
									title: vm.playVideo.title,
									link: 'http://zz.zdcf.cn/pages/find/play.html?idStr='+vm.idStr, // 分享链接
									imgUrl: 'http://zz.zdcf.cn/build/images/logo.png', // 分享图标
									success: function () { 
								    	get('/discovery/opinion/share',{opinionIdStr:vm.idStr},function(res){
								    		vm.playVideo.sharedCount=res.data.sharedCount;
								    	});

									},
								});
							});	
						}
					});
					$(".share-jump-wrap").show();
					$(".share-jump-bg").show();
					$('.mine-not-login').hide();
				},
				cancelShere:function(){
					//取消分享
					$(".share-jump-wrap").hide()
					$(".share-jump-bg").hide()
				}			
			},
			filters:{
				statistics:function(number){
					if(number>1000){
						return '999+'
					}else{
						return number
					}
				}
			},
			created:function(){
				this.page = window.localStorage.getItem('page')
			}			
		})
		
					
		/*-------以下为jQuery部分，用来控制视频的播放/暂停--------*/
		$(function(){
			var video = $("#videoID")
			$(".video .controls .btnPlay").click(function(event){
				//点击播放(图片)按钮
				event.stopPropagation()
				video[0].play();
				$(this).hide()
				//$(this).remove()
				$(".video>.controls>.opacity").hide()
				$(".video>.controls>img").remove()
				$(".video>.controls>.btnPlay>img").remove()
				$(this).html('&#xe655;')
			})
			
			setInterval(function(){
				if(video[0].paused){$(".video .controls .btnPlay").show()}
			},1000)
			
	
			$(".video .controls").click(function(){
				//点击视频区域 播放/暂停
				
				if(video[0].paused){
					video[0].play()
			 		$(".video .controls .btnPlay").hide()
			 		}else{
					video[0].pause();
		 		  	$(".video .controls .btnPlay").show()
				}
			})
		
			
			$("#videoID").on('loadedmetadata',function(){
				//视频总时长
				var time = parseInt(video[0].duration)
				var minutes = parseInt(time/60)
				var second = time%60
				if(minutes < 10){minutes = '0'+minutes}
				if(second < 10){second = '0'+second}
				time = minutes+'`'+second
				$(".video .time .duration").text(time);
			})
			video.on('timeupdate', function() {
				//视频已播放时长
				var time = video[0].currentTime			
				var time2 = video[0].duration
				var percentage = 100 * time / time2; //in %
			  //  $('.video .progressBar .timeBar').css('width',percentage+'%'); //控制进度条
			   // $('.video .progressBar .btnDrag').css('left', percentage+'%'); //控制进度条上按钮移动的位置
			    
			    
				var minutes = parseInt(time/60)
				var second = parseInt(time%60)
				if(minutes < 10){minutes = '0'+minutes}
				if(second < 10){second = '0'+second}
				time = minutes+'`'+second
			   $('.video .time .current').text(time);
			});
			
			
		})
	</script>
</body>
</html>